<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-02-16 20:14:45
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-02-17 14:39:50
 * @FilePath: \滑动修改\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="title">
            <h1>Update CSS Variables with <span id="change">JS</span></h1>
        </div>
        <div class="setting">
            <div>
                <span>Spacing</span>
                <input id='spacing' type="range" max="30" min="0" value>
            </div>
            <div>
                <span>Blur</span>
                <input id='blur' type="range" max="10" min="0" value>
            </div>
            <div>
                <span>Base Color</span>
                <input id='color' type="color">
            </div>
        </div>
        <div class="img">
            <img src="img.jpg" alt="">
        </div>
    </div>
    <script>

        // function active(e){
        //     if(e.target.id === 'blur'){
        //         img.style.filter = `blur(${e.target.value}px)`
        //     }
        //     if(e.target.id === 'spacing'){
        //         img.style.borderWidth = `${e.target.value}px`
        //     }
        //     if(e.target.id === 'color') {
        //         img.style.borderColor = e.target.value
        //         span.style.color = e.target.value
        //     }
        // }
        const input = document.querySelectorAll('input')
        const img = document.querySelector('img')
        const span = document.querySelector('#change')
        const obj = {
            blur(e){
                img.style.filter = `blur(${e.target.value}px)`
            },
            spacing(e){
                img.style.borderWidth = `${e.target.value}px`
            },
            color(e){
                img.style.borderColor = e.target.value
                span.style.color = e.target.value
            }
        }
        input.forEach((item) => {
            item.addEventListener('input',(e) => {
                obj[e.target.id](e)
            })
        })
        

    </script>
</body>
</html>